def display_city_cards(region_distribution):
    """
    将城市分布表格显示替换为卡片视图
    
    Args:
        region_distribution (dict): 包含地区分布数据的字典
    """
    import streamlit as st
    import pandas as pd
    import plotly.express as px
    import re
    
    # 检查数据是否存在
    if not region_distribution or not region_distribution.get('top_cities'):
        st.info("暂无详细地区分布数据。您可以通过职位搜索网站了解不同地区的职位分布情况。")
        return
    
    # 显示地区分布概览
    st.markdown("### 🗺️ 全国职位地区分布")
    
    # 创建CSS样式
    st.markdown("""
    <style>
    .city-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }
    .city-card {
        background-color: #f8fafc;
        border-radius: 10px;
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        transition: transform 0.2s, box-shadow 0.2s;
        border-top: 4px solid #3b82f6;
    }
    .city-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .city-name {
        font-size: 18px;
        font-weight: bold;
        color: #1e3a8a;
        margin-bottom: 5px;
    }
    .city-percentage {
        display: inline-block;
        background-color: #dbeafe;
        color: #1e40af;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 13px;
        margin-bottom: 8px;
    }
    .city-info {
        font-size: 14px;
        margin-bottom: 5px;
        color: #4b5563;
    }
    .city-industry {
        font-size: 13px;
        color: #6b7280;
        padding-top: 5px;
        border-top: 1px solid #e2e8f0;
        margin-top: 5px;
    }
    </style>
    """, unsafe_allow_html=True)
    
    # 显示城市分布图表
    try:
        # 提取城市和百分比数据
        chart_city_data = []
        for city in region_distribution.get('top_cities', []):
            city_name = city.get('name', '')
            percentage = 0
            if isinstance(city.get('percentage', ''), str):
                # 尝试从百分比字符串中提取数字
                match = re.search(r'(\d+(\.\d+)?)', city.get('percentage', '0'))
                if match:
                    percentage = float(match.group(1))
            elif isinstance(city.get('percentage', 0), (int, float)):
                percentage = float(city.get('percentage', 0))
            
            if city_name:
                chart_city_data.append({
                    "城市": city_name,
                    "岗位占比": percentage
                })
        
        if chart_city_data:
            # 创建水平条形图
            df = pd.DataFrame(chart_city_data)
            df = df.sort_values("岗位占比", ascending=True)
            
            if len(df) > 10:
                df = df.tail(10)  # 只显示前10个城市
                
            fig = px.bar(
                df,
                y="城市",
                x="岗位占比",
                title="主要城市岗位分布占比",
                orientation='h',
                color="岗位占比",
                color_continuous_scale=px.colors.sequential.Blues,
                text="岗位占比"
            )
            fig.update_layout(height=500)
            fig.update_traces(texttemplate='%{text:.1f}%', textposition='outside')
            st.plotly_chart(fig, use_container_width=True)
    except Exception as e:
        st.warning(f"无法显示城市分布图表: {str(e)}")
    
    # 获取城市数据
    top_cities = region_distribution.get('top_cities', [])
    if top_cities:
        # 开始卡片网格
        st.markdown('<div class="city-grid">', unsafe_allow_html=True)
        
        # 城市颜色列表，用于城市卡片上边框
        city_colors = [
            "#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", 
            "#ec4899", "#06b6d4", "#f97316", "#6366f1", "#14b8a6"
        ]
        
        for i, city in enumerate(top_cities):
            city_name = city.get('name', f'城市{i+1}')
            percentage = city.get('percentage', 'N/A')
            avg_salary = city.get('avg_salary', 'N/A')
            
            # 处理主导行业
            dominant_industries = city.get('dominant_industries', [])
            if isinstance(dominant_industries, list) and dominant_industries:
                industries_text = ", ".join(dominant_industries)
            else:
                industries_text = "多元化"
            
            # 设置卡片顶部边框颜色
            border_color = city_colors[i % len(city_colors)]
            
            # 创建城市卡片
            st.markdown(f"""
            <div class="city-card" style="border-top-color: {border_color};">
                <div class="city-name">{city_name}</div>
                <div class="city-percentage">{percentage}</div>
                <div class="city-info"><strong>平均薪资:</strong> {avg_salary}</div>
                <div class="city-industry"><strong>主导行业:</strong> {industries_text}</div>
            </div>
            """, unsafe_allow_html=True)
        
        # 结束卡片网格
        st.markdown('</div>', unsafe_allow_html=True)
        
        # 保留原来的表格作为备选视图
        with st.expander("查看表格数据", expanded=False):
            city_data = []
            for city in top_cities:
                if city.get('name'):
                    city_data.append({
                        "城市": city.get('name', ''),
                        "岗位占比": city.get('percentage', 'N/A'),
                        "主导行业": ", ".join(city.get('dominant_industries', [])) if isinstance(city.get('dominant_industries', list)) else "多元化",
                        "平均薪资": city.get('avg_salary', 'N/A')
                    })
            
            if city_data:
                st.dataframe(pd.DataFrame(city_data), use_container_width=True, hide_index=True)
